<template>
  <el-col id="articleCard" :span="8" style="width: 100%">
    <div v-for="(item, index) in getArticleType" :key="item.type">
      <el-card shadow="hover">
        <div class="block">
          <table>
            <tr>
              <td>
                <div class="demo-image">
                  <!-- <span style="" class="demonstration"></span> -->
                  <el-image
                    fit="cover"
                    style="width: 250px; height: 250px"
                    :src="`${item.imgPath}`"
                  ></el-image>
                </div>
              </td>
              <td
                @click="
                  getArticleKey(index, item.article.id);
                  toArticleDetails();
                "
                style="width: 100%; text-align: center; vertical-align: top"
              >
                <el-link target="_blank">
                  <!-- 文章标题 -->
                  <div id="articleTitle">{{ item.article.title }}</div>
                </el-link>
                <div id="details" style="text-align: left; margin-top: 10px">
                  <span
                    style="word-break: break-all; word-wrap: break-word"
                    v-html="item.article.content.substr(0, 100) + '...'"
                  >
                    <!-- 文章内容 -->
                  </span>
                </div>
              </td>
            </tr>
          </table>

          <div id="crossline">
            <!-- 浏览量 -->
            <span style="text-align: right; float: right; margin-left: 10px">
              <el-button type="text" disabled>
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-browse"></use>
                </svg>
                {{ item.viewsCount }}</el-button
              >
            </span>
            <!-- 评论 -->
            <span style="text-align: right; float: right; margin-left: 10px">
              <el-button type="text">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-comments"></use>
                </svg>
                {{ item.commentCount }}</el-button
              >
            </span>
            <!-- 点赞 -->
            <span style="text-align: right; float: right; margin-left: 10px">
              <el-button
                :id="`${item.article.id}`"
                @click="dianzan(item.article.id, index)"
                type="text"
                :style="isuserlike(item.article.id) ? 'color:#409EFF' : ''"
              >
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-good"></use>
                </svg>
                {{ item.count }}</el-button
              >
            </span>
            <!-- 时间 -->
            <el-divider content-position="right">{{
              item.article.createdTime
            }}</el-divider>
          </div>
        </div>
      </el-card>
    </div>
  </el-col>
</template>

<script>
import { getList, GetLikeCount, PostLikeMsg, GetViews } from "../../api/index";
import { userlike } from "../../api/like";
// import { getList } from "../../api/index";

// let likeStatus = 0;
export default {
  props: {
    CommentRecommend: [],
    ViewsRecommend: [],
    AdminRecommend: [],
    articleQueryData: [],
  },
  watch: {
    $route(newValue, oldValue) {
      console.log(newValue, oldValue);
      this.getArticleType = [];
      this.getType = this.$route.query;
      this.renderArticleType();
      console.log(newValue);
      if (newValue.fullPath === "/articleinfo") {
        this.fetchData();
      }
    },
    // deep: true,
    CommentRecommend: {
      handler: function(newValue, oldValue) {
        if (newValue && oldValue) {
          this.fetchData();
        }
      },
      deep: true,
    },
    ViewsRecommend: {
      handler: function(newValue, oldValue) {
        // console.log(oldValue)
        // console.log(newValue)
        if (newValue && oldValue) {
          this.fetchData();
        }
      },
      deep: true,
    },
    articleQueryData: {
      handler: function(newValue, oldValue) {
        console.log(newValue, oldValue);
        if (newValue) {
          this.fetchData(newValue);
        }
        if (newValue.length === 0) {
          this.fetchData();
        }
      },
    },
    tableData: {
      handler: function(newValue, oldValue) {
        // console.log(newValue, oldValue);
        if (newValue && oldValue) {
          this.userslike();
        }
      },
    },
  },
  data() {
    return {
      isUserLike: [],
      tableData: [],
      list: [],
      num: 1,
      sum: 1,
      likeCountData: "",

      // 用于存放监听到的类型文章
      getArticleType: [],

      // 用于存放监听到的类型
      getType: {},

      // 浏览量demo
      browse: "9940",

      // 评论数demo
      comment: "500",

      // 发布日期demo
      publishDate: "2021-07-31",
      // >>>>>>> bc64de1078bbd27459d5d1c2785757ac7aa7bcff
    };
  },

  methods: {
    dianzan(id, index) {
      let dianzan = document.getElementById(id);
      var userid = localStorage.getItem("userId");

      var a = {
        UserId: parseInt(userid),
        ArticleId: id,
      };
      PostLikeMsg(a)
        .then(({ data }) => {
          var res = data.data;
          // console.log(res);
          if (res) {
            // console.log(this.tableData[index]);
            this.tableData[index].count += 1;
            dianzan.style.color = "#409EFF";
            console.log("已点赞");
          } else {
            // console.log(this.tableData[index]);
            this.tableData[index].count -= 1;
            dianzan.style.color = "black";
            console.log("取消点赞");
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    fetchData(isQuery) {
      if (isQuery) {
        GetLikeCount()
          .then((likeCountData) => {
            this.likeCountData = likeCountData.data.data;
            var likeRes = likeCountData.data.data;

            //查询信息
            var res = isQuery;
            res.forEach((e) => {
              e.imgPath =
                "https://cmsbackend.lx15149.com/" +
                e.imgPath.slice(e.imgPath.indexOf("files") + 6);

              this.CommentRecommend.forEach((item) => {
                if (e.article.id === item.id) {
                  e.commentCount = item.CommentCount;
                }
                if (!e.commentCount) {
                  e.commentCount = 0;
                }
              });

              this.ViewsRecommend.forEach((item) => {
                if (e.article.id === item.id) {
                  e.viewsCount = item.viewsCount;
                }
                if (!e.viewsCount) {
                  e.viewsCount = 0;
                }
              });

              likeRes.forEach((x) => {
                if (e.article.id === x.articleId) {
                  e.count = x.count;
                }
                if (!e.count) {
                  e.count = 0;
                }
              });
            });

            this.tableData = res;
            this.getArticleType = this.tableData;
          })
          .catch((err) => {
            console.log(err);
          });

        //获取浏览量表
        GetViews()
          .then(() => {
            // console.log(data.data.data);
          })
          .catch((err) => {
            console.log(err);
          })
          .catch((err) => {
            console.log(err);
          });
      } else {
        //点赞信息
        GetLikeCount()
          .then((likeCountData) => {
            // console.log(likeCountData.data.data);
            this.likeCountData = likeCountData.data.data;
            var likeRes = likeCountData.data.data;
            //列表信息
            getList()
              .then((listData) => {
                var res = listData.data.data;
                // console.log(res);
                res.forEach((e) => {
                  e.imgPath =
                    "https://cmsbackend.lx15149.com/" +
                    e.imgPath.slice(e.imgPath.indexOf("files") + 6);

                  // console.log(this.CommentRecommend);
                  this.CommentRecommend.forEach((item) => {
                    if (e.article.id === item.id) {
                      e.commentCount = item.CommentCount;
                    }
                    if (!e.commentCount) {
                      e.commentCount = 0;
                    }
                  });

                  this.ViewsRecommend.forEach((item) => {
                    // console.log(item);
                    if (e.article.id === item.id) {
                      e.viewsCount = item.viewsCount;
                    }
                    if (!e.viewsCount) {
                      e.viewsCount = 0;
                    }
                  });

                  likeRes.forEach((x) => {
                    if (e.article.id === x.articleId) {
                      e.count = x.count;
                    }
                    if (!e.count) {
                      e.count = 0;
                    }
                  });
                });
                this.tableData = res;
                if (
                  window.location.pathname === "/articleinfo" &&
                  window.location.search === ""
                ) {
                  this.getArticleType = this.tableData;
                } else {
                  this.getArticleType = [];
                  this.getType = this.$route.query;
                  this.renderArticleType();
                }
              })
              .catch((err) => {
                console.log(err);
              });

            console.log(this.getArticleType);
          })
          .catch((err) => {
            console.log(err);
          });
        //获取浏览量表
        GetViews()
          .then(() => {
            // console.log(data.data.data);
          })
          .catch((err) => {
            console.log(err);
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
    // 监听到点击的文章的索引和id
    getArticleKey(index, id) {
      this.getIndex = index;
      this.getArticleId = id;

      // console.log(this.getIndex);
      // console.log(this.getArticleId);
    },
    toArticleDetails() {
      this.$router.push({
        path: "/articledetails", //页面路径
        query: {
          getIndex: this.getIndex,
          getArticleId: this.getArticleId,
        }, // 参数传值
      });
    },

    // 接收监听到的类型文章
    renderArticleType() {
      this.tableData.forEach((item) => {
        if (item.article.articleType.indexOf(this.getType.type) != -1) {
          this.getArticleType.push(item);
        }
      });
    },
    userslike() {
      var article = this.tableData;
      article.forEach((e) => {
        var res = {
          ArticleId: e.article.id,
          UserId: parseInt(localStorage.getItem("userId")),
        };
        userlike(res)
          .then(({ data }) => {
            if (data.data !== null) {
              this.isUserLike.push(data.data.articleId);
            }
          })
          .catch((err) => {
            console.log(err);
          });
      });
      console.log(this.isUserLike);
    },
    isuserlike(id) {
      const set = new Set(this.isUserLike);
      if (set.has(id)) {
        return true;
      } else {
        return false;
      }
    },
  },
  mounted() {
    this.getType = this.$route.query;
    console.log(this.getType);

    this.fetchData();
  },
};
</script>

<style scoped>
.like {
  color: #409eff;
}
#articleTitle {
  font-size: 30px;
  color: black;
}
#details {
  font-size: 20px;
  /* margin-top: 30px; */
  text-align: left;
}
.el-card {
  width: 100%;
  min-width: 1024px;
  min-height: 300px;
  background-color: azure;
  margin-top: 10px;
}

.icon {
  width: 25px;
  height: 25px;
  vertical-align: -0.5em;
  fill: currentColor;
  overflow: hidden;
}
.el-button--text {
  color: black;
}
.block {
  text-align: left;
  /* width: 250px; */
}
</style>
